<template>
  <div class="loggingDesk-wrapper">
    <div class="loggingDesk-top">
      <div class="theWatchDetail">
        <div class="theWatchDetailTitle-wrapper">
          <h4>国网湖南电力有限公司</h4>
          <el-select class="systemInput" size="mini" v-model="value" clearable>
            <el-option
              v-for="item in queryUsers.slice(1)"
              :key="item.departmentId"
              :label="item.securityCoreName"
              :value="item.departmentId"
            >
            </el-option>
          </el-select>
        </div>
        <div class="theWatchDetailPicture-wrapper">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgsa.baidu.com%2Fexp%2Fw%3D500%2Fsign%3D774e86899b25bc312b5d01986ede8de7%2F71cf3bc79f3df8dc8bbbdcd6cf11728b461028f6.jpg&refer=http%3A%2F%2Fimgsa.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627800588&t=0767aee55772b0061e33cf3b73ee3364"
            alt=""
            class="Imgs"
          />
          <span> {{ userName }} </span>
        </div>
        <div class="theWatchDetailButton-wrapper">
          <span class="slogan"
            >人人讲安全，事事为安全<br />时时想安全，处处要安全</span
          >
          <div class="buttons-wrapper">
            <span class="businessButtonConfirm">签到打卡</span>
            <span class="businessButtonCancel">我的值班</span>
          </div>
        </div>
      </div>
      <div class="numberOfWork">
        <div class="row highlight">
          <span class="totalWork">今日作业总数</span>
          <span>11</span>
        </div>
        <div class="row highlight">
          <span class="numberOfHighRiskWork">三/四级风险作业数</span>
          <span style="color: #c00303">22</span>
        </div>
        <div class="row">
          <span style="color: #e0021d; font-weight: bold; margin-right: 16px"
            >四级风险</span
          >
          <span>33</span>
        </div>
        <div class="row">
          <span style="color: #c5b040; font-weight: bold; margin-right: 16px"
            >二级风险</span
          >
          <span>44</span>
        </div>
        <div class="row">
          <span style="color: #f57309; font-weight: bold; margin-right: 16px"
            >三级风险</span
          >
          <span>55</span>
        </div>
        <div class="row">
          <span style="color: #82d7e4; font-weight: bold; margin-right: 16px"
            >一级风险</span
          >
          <span>66</span>
        </div>
      </div>
      <div class="warningDetail">
        <div class="warningTitle">
          <span>告警待办</span>
          <span>32</span>
          <span class="businessButtonConfirm">历史告警</span>
        </div>
        <el-table
          stripe
          height="calc(100% - 44px)"
          :data="tableData"
          class="businessTable"
        >
          <el-table-column
            prop="name"
            label="告警类型"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="account"
            label="告警内容"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="account"
            label="作业计划"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="account"
            label="告警时间"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="account"
            label="现场工作负责人"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="loggingDesk-bottom">
      <div class="workList">
        <div class="workListTitle">
          <span>今日作业计划</span>
          <span class="businessButtonConfirm">轮训方案</span>
        </div>
        <div class="searches-wrapper">
          <div class="businessSearchCondition">
            <label>作业风险等级：</label>
            <!-- <el-select class="businessConditionInput">
              <el-option></el-option>
            </el-select> -->
          </div>
          <div class="businessSearchCondition">
            <label>专业类型：</label>
            <!-- <el-select class="businessConditionInput">
              <el-option></el-option>
            </el-select> -->
          </div>
          <div class="businessSearchCondition">
            <label>所属单位：</label>
            <!-- <el-select class="businessConditionInput">
              <el-option></el-option>
            </el-select> -->
          </div>
        </div>
        <el-table
          stripe
          height="calc(100% - 156px)"
          :data="tableData"
          class="businessTable"
        >
          <el-table-column
            prop="name"
            label="开工状态"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="account"
            label="作业计划名称"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="account"
            label="所属单位"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="account"
            label="作业计划内容"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="account"
            label="详情"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="account"
            label="评价"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <!-- <el-pagination
            class="businessPagination"
            :current-page="pageIndex"
            :total="totalCount"
            :page-size="pageSize"
            :page-sizes="[originPageSize, 10, 15, 20, 50]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange">
        </el-pagination> -->
      </div>
      <div class="map-wrapper">
        <div class="amap-page-container">
          <el-amap vid="amapDemo" :center=" center" plugin="" class="amap-demo">

          </el-amap>
        </div>
        <div id="panel"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Information , obtainGiveAlarm} from "@/business/api/loggingDesk";
// import mapComponent from '@/business/components/map'

export default {
  name: "",
  data() {
    return {
      value: "",
      //安全中心人员名称
      userName: "",
      // 头像
      captchaImg: [],
      // 查询用户 姓名 头像地址 所属公司 所属公司id
      queryUsers: [],

      tableData: [],

      // 地图
      headTxt: '济南',
      center: [ 117	,36.65 ],
      lng: 0,
      lat: 0,
      // keytype: '周边景点',

    };
  },
  components:{
    // mapComponent
  },

  //地图显示
  // created(){
  //   setTimeout( ()=>{
  //     this.grtnesrinfo()
  //   },200 )
  // },
  mounted() {
    this.userInformation();
  },
  methods: {
    // 根据用户id查询用户姓名 头像地址 所属公司 所属公司id
    userInformation() {
      Information({
        userId: 1,
      }).then((res) => {
        this.queryUsers = res.data;
        this.userName = this.queryUsers[0].userName;
        this.captchaImg = this.queryUsers[0].photo;
        // this.captchaImg = createObjectURL(this.queryUsers[0].photo)
        console.log(this.queryUsers);
      });
    },
    // 获取告警代办
    
    

    //  地图
    // grtnesrinfo() {

    //   AMap.service( ["AMap.PlaceSearch"], ()=> {
    //     // 高德地图PlaceSearch 下的searchNearBy方法
    //     let PlaceSearch = new AMap.PlaceSearch({
    //       city: '济南',
    //       citylimit: true,
    //       typr: this.keytype,
    //       pageSize: 10,
    //       pageIndex: 1,
    //       panel: 'panel',
    //     });
    //     let cpoint = [ this.center[0], this.center[1] ];
    //     PlaceSearch.searchNearBy( '', cpoint, 1000, ( status, result )=>{
    //         console.log(result);
    //     } )
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.loggingDesk-wrapper {
  height: calc(100% - 42px);
  background: var(--system-page-content-bgc);
  border-radius: 6px;
}

.loggingDesk-top {
  border-bottom: 1px solid var(--system-page-content-border-color);
  height: 200px;
  width: 100%;
  padding: 0 0 10px 0;
  display: flex;
  flex-direction: row;

  .theWatchDetail {
    // width: 600px;
    width: 26%;
    height: 100%;
    padding: 0 10px;

    .theWatchDetailTitle-wrapper {
      width: 100%;
      height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      // margin-bottom: 14px;
    }

    .theWatchDetailPicture-wrapper,
    .theWatchDetailButton-wrapper {
      float: left;
      height: 150px;
      padding-bottom: 10px;
      // margin-bottom: 10px;
    }

    .theWatchDetailPicture-wrapper {
      width: 120px;
      background-color: #f3f2f0;

      .Imgs {
        // width: 100%;
        height: 130px;
      }
    }

    .theWatchDetailButton-wrapper {
      width: calc(100% - 120px);
      background-color: #fcfaf2;

      .slogan {
        display: inline-flex;
        height: calc(100% - 48px);
        font-size: 14px;
        align-items: center;
      }

      .buttons-wrapper {
        display: inline-flex;
        width: 100%;
        justify-content: space-around;
      }
    }
  }

  .numberOfWork {
    // width: 350px;
    width: 24%;
    height: 100%;
    border: 1px solid var(--system-page-content-border-color);
    padding: 10px 0;

    .row {
      float: left;
      margin-left: 6px;
      width: calc(50% - 9px);
      margin-bottom: 16px;
      font-size: 14px;

      &.highlight {
        height: 84px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        font-size: 16px;
        span:last-child {
          font-size: 20px;
        }

        &:first-child {
          background-color: #f6f6f6;
        }

        &:nth-child(2) {
          background-color: #fdf7f3;
        }
      }
    }
  }

  .warningDetail {
    // width: calc(100% - 815px);
    width: 50%;
    height: 100%;
    padding: 0 24px;

    .warningTitle {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      span:nth-child() span:first-child {
        font-size: 16px;
        margin-right: 16px;
      }

      .businessButtonConfirm {
        margin-left: auto;
      }
    }
  }
}

.loggingDesk-bottom {
  width: 100%;
  height: calc(100% - 250px);
  display: flex;

  .workList {
    width: 600px;
    padding: 0 10px;

    .workListTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;

      span:first-child {
        font-size: 14px;
      }
    }

    .searches-wrapper {
      padding: 12px 0;

      .businessSearchCondition {
        width: 169px;
        margin-right: 12px;
      }
    }
  }

  .map-wrapper {
    width: calc(100% - 600px);

    .amap-demo {
      height: 400px;
    }
  }
}
</style>

